import * as React from "react"

import { cn } from "@/lib/utils"

interface InputProps extends React.ComponentProps<"input"> {
  startIcon?: React.ReactNode;
  endIcon?: React.ReactNode;
}

function Input({ className, type, startIcon, endIcon, ...props }: InputProps) {
  return (
    <div
      data-slot="input-wrapper"
      className={cn(
        "h-9",
        "flex items-center w-full min-w-0 rounded-md border bg-transparent shadow-xs transition-[color,box-shadow] outline-none",
        "border-input",
        "focus-within:border-ring",
        "focus-within:ring-1 focus-within:ring-ring/50",
        "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
        "dark:aria-invalid:ring-destructive/40",
        "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
    >
      {startIcon && (
        <div className="flex shrink-0 items-center text-muted-foreground pl-3">
          {startIcon}
        </div>
      )}
      <input
        type={type}
        data-slot="input"
        className={cn(
          "flex-1 border-0 bg-transparent outline-none",
          "placeholder:text-muted-foreground/70 placeholder:text-sm",
          "disabled:cursor-not-allowed disabled:opacity-50 h-full w-full",
          "px-3"
        )}
        {...props}
      />
      {endIcon && (
        <div className="flex shrink-0 items-center text-muted-foreground pr-3">
          {endIcon}
        </div>
      )}
    </div>
  )
}

export { Input }
